<template>
    <div class="detail page">
        <div class="con" style="padding: 10px 0 44px" v-if="item">


            <div class="top">
                <div class="slide">
                    <cube-slide :data="midImgs">
                        <cube-slide-item v-for="(item, index) in midImgs" :key="index">

                            <img class="img" :src="imgH+item">

                        </cube-slide-item>
                    </cube-slide>
                </div>
            </div>
            <div class="info">
                <div class="name">
                    {{item.name}}
                </div>
                <div class="prices">
                    <span class="nowPrice">¥{{item.nowPrice}}</span>
                    <span class="oldPrice">¥{{item.oldPrice}}</span>
                    <!--                <div class="decrease">{{decrease}}折</div>-->
                </div>
                <div class="other">
                    <span class="sale">销量：{{item.sales}}</span>
                    <span class="stock">库存：{{item.stock}}</span>
                    <span class="pv">浏览量：9999+</span>
                </div>
            </div>

            <div class="l-btns">
                <labelbtn :canClick="false" txt="该商品可分享" txtColor="#6F6F6F" rightColor="#FF9B9BFF" rightTxt="点击右上角立即分享"
                          bgColor="#FFF0F0"></labelbtn>
                <labelbtn :canClick="false" v-if="item.unit" name="单位" :txt="item.unit" txtColor="#FC8787FF"></labelbtn>
                <labelbtn v-if="hasSku" name="选择型号" :txt="skuName" @click.native="showSku()"></labelbtn>
                <labelbtn :canClick="false" v-if="item.coupon&&item.coupon>0" name="优惠券" :txt="item.coupon" txtColor="#FC8787FF"></labelbtn>
                <labelbtn :canClick="false" v-if="item.point&&item.point>0" name="需积分" :txt="item.point" txtColor="#FC8787FF"></labelbtn>
                <labelbtn :canClick="false" v-if="item.expDate" name="日期" :txt="item.expDate" txtColor="#FC8787FF"></labelbtn>
<!--                <labelbtn name="升车" txt="新人首单送20元无门槛代金劵"></labelbtn>-->
<!--                <labelbtn name="服务" txt="7天无理由退换货" :canClick="false"></labelbtn>-->
            </div>


            <!--        <comment style="margin-top:9px"></comment>-->

            <div class="detail-img">
                <div class="title">
                    宝贝详情
                </div>
                <div class="img" v-for="(item,index) in bigImgs" :key="index">
                    <img :src="imgH+item" alt="">
                </div>
            </div>

                    <sku @confirm="skuConfirm" v-model="skuName" :goods="item" :show.sync="skuShow"></sku>

            <buybar @toCommit="toCommit" @addCart="addCart" :badge="cartCount"></buybar>


        </div>
    </div>
</template>

<script>
    import labelbtn from '@/components/base/label-btn'
    import comment from '@/components/comment'
    import buybar from '@/components/detail-bar'
    import sku from '@/components/sku'
    import {detail} from "@/api/home";
    import {addCart} from "@/api/cart";
    import * as Toast from '@/toast'
    import {mapState, mapActions} from 'vuex'
    import Wx from '@/wx'
    import {config} from "@/util/wx";
    import {share} from "../../api/point";

    export default {
        activated() {
            this.skuName = null
            this.quantity = 1
            detail(this.$route.query.id).then(res => {
                this.item = res.data
                if (process.env.VUE_APP_NAME != "wg"||this.user.levelId !== 5) {
                    config().then(res => {
                        let url = process.env.VUE_APP_PATH + this.$route.fullPath + "&" + process.env.VUE_APP_TOP_USER_ID + "=" + this.userId
                        let imgUrl = this.imgH + this.item.img
                        Wx.share(this.item.title, url, imgUrl, this.item.info).then(res => {
                            //分享成功赠送积分
                            // share()
                        })
                    })
                }

            })
        },
        computed: {
            hasSku(){
              if(this.item.saleType===0&&this.item.openSku){//零售且开启规格
                  return true
              }
              return false
            },
            decrease() {
                let dec = ((this.item.nowPrice / this.item.oldPrice) * 10).toFixed(1)
                if (dec.indexOf('.0') > -1) {
                    dec = Math.floor(dec)
                }
                return dec
            },
            midImgs() {
                return this.item.midImg.split(',')
            },
            bigImgs() {
                return this.item.bigImg.split(',')
            },
            ...mapState({
                cartCount: state => state.mall.cartCount,
                userId: state => state.user.user.userId
            })
        },
        data() {
            return {
                toCart:false,
                skuName:null,
                quantity:1,
                imgH: process.env.VUE_APP_IMG_DOMAIN,
                skuShow: false,
                item: null
            }
        },
        methods: {
            ...mapActions([
                'updateCartCount'
            ]),
            skuConfirm(skuName,quantity){
                this.skuName = skuName
                this.quantity = quantity
                this.addCart()
            },
            toCommit() {
                this.toCart = true
                this.addCart()
            },
            addCart() {
                if(this.hasSku&&!this.skuName){
                    this.showSku()
                }else {
                    addCart(this.item.id,this.skuName,this.quantity).then(res => {
                        this.updateCartCount(this.cartCount + 1)
                        if(this.toCart){
                            this.$router.push('/cart')
                        }else {
                            Toast.showInfo("加入购物车成功!")
                        }
                    })
                }
            },
            turn(path) {
                this.$router.push(path)
            },
            showSku() {
                this.skuShow = true
            }
        },
        components: {
            labelbtn, comment, buybar,sku
        }
    }
</script>

<style scoped lang="stylus">
    .detail

        z-index 2
        /*overflow hidden*/
        height 100%
        background url("./dbg.png") no-repeat $page-bg
        background-size 100%
        /*padding-top 10px*/
        /*overflow hidden*/

        .top
            padding 0 10px

            .slide
                border-radius 5px
                overflow hidden

                .img
                    width 100%

        .info
            margin-top 10px
            background-color white
            border-radius 5px
            padding 14px 9px 16px

            .name
                font-size 14px
                color #4E3D07
                line-height 14px

            .prices
                margin-top 17.5px
                margin-bottom 12px
                display flex
                align-items flex-end

                .nowPrice
                    color: #F1652E
                    font-size 16px

                .oldPrice
                    text-decoration-line line-through
                    color $font-color-light
                    font-size 12px
                    margin-left 4px
                    margin-right 6px

                .decrease
                    color white
                    font-size 10px
                    line-height 14px
                    padding 0 4px
                    height 14px

                    background-color #F1652E

            .other
                color $font-color-light
                font-size 10px
                display flex
                justify-content space-between

        .l-btns
            z-index 2

        .detail-img
            background-color white
            padding 0 9px
            margin-top 10px

            .title
                color $font-color-deep
                font-size 16px
                text-align center
                padding 15px 0

            .img
                img
                    width 100%


</style>
